<template>
	<view class="auth-modal" v-if="show">
		<view class="mask"></view>
		<view class="modal-content">
			<view class="modal-header">
				<text>用户授权协议</text>
			</view>

			<scroll-view scroll-y class="modal-body">
				<view class="agreement-text">
					<text>请您仔细阅读并同意以下协议：</text>
					<view class="links">
						<text class="link" @click="navigateToAgreement('agreement')">《用户服务协议》</text>
						<text>和</text>
						<text class="link" @click="navigateToAgreement('privacy')">《隐私政策》</text>
					</view>
				</view>

				<checkbox-group @change="handleAgreeChange">
					<label class="checkbox-item">
						<checkbox :checked="agreed" color="#007AFF" />
						<text>我已阅读并同意上述协议</text>
					</label>
				</checkbox-group>
			</scroll-view>

			<view class="modal-footer">
				<button class="btn cancel" @click="handleCancel">取消</button>
				<button class="btn confirm" :disabled="!agreed" @click="handleConfirm">同意并继续</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				agreed: false
			}
		},
		methods: {
			handleAgreeChange(e) {
				this.agreed = e.detail.value.length > 0
			},
			navigateToAgreement(type) {
				uni.navigateTo({
					url: `/pages/agreement/agreement?type=${type}`
				})
			},
			handleCancel() {
				this.$emit('cancel')
			},
			handleConfirm() {
				if (this.agreed) {
					this.$emit('confirm')
				}
			}
		}
	}
</script>

<style>
	.auth-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
	}

	.mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.modal-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.modal-header {
		padding: 30rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		border-bottom: 1rpx solid #eee;
	}

	.modal-body {
		max-height: 60vh;
		padding: 30rpx;
	}

	.agreement-text {
		margin-bottom: 30rpx;
		line-height: 1.6;
	}

	.links {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 15rpx;
	}

	.link {
		color: #007AFF;
		margin: 0 10rpx;
	}

	.checkbox-item {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.modal-footer {
		display: flex;
		border-top: 1rpx solid #eee;
	}

	.btn {
		flex: 1;
		border-radius: 0;
		background-color: transparent;
		color: #333;
		font-size: 30rpx;
		line-height: 80rpx;
		height: 80rpx;
	}

	.btn::after {
		border: none;
	}

	.btn.cancel {
		color: #999;
	}

	.btn.confirm {
		color: #007AFF;
	}

	.btn.confirm[disabled] {
		color: #ccc;
	}
</style>